<script setup lang="ts">
defineOptions({
  name: "overviewSecondRowItem"
});
import { markRaw } from "vue";
import resistivity from "@/assets/svg/common/resistivity.svg?component";
import temperature from "@/assets/svg/common/temperature.svg?component";
import waterPressure from "@/assets/svg/common/waterPressure.svg?component";

const iconComList = {
  resistivity: markRaw(resistivity),
  temperature: markRaw(temperature),
  waterPressure: markRaw(waterPressure)
};

interface Props {
  data?: any;
}

const props = withDefaults(defineProps<Props>(), {});
</script>

<template>
  <div class="second-item-content">
    <component :is="iconComList[data?.icon]" class="content-icon color-icon" />
    <div class="content-box">
      <div class="content-box-label">{{ data?.label }}</div>
      <div class="content-box-data">
        <span class="data-text color-icon font">{{ data?.value || "--" }}</span>
        <span class="data-text">{{ data?.value ? data?.unit || "" : "" }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorIcon: var(--px-color-primary);

.second-item-content {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;

  .color-icon {
    color: $colorIcon !important;
  }

  .font {
    font-size: 24px !important;
  }

  .content-icon {
    max-width: 50px;
    max-height: 50px;
  }

  .content-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .content-box-label {
    font-weight: 600;
    line-height: 1;
    color: #555;
    white-space: nowrap;
  }

  .content-box-data {
    display: flex;
    gap: 6px;
    align-items: flex-end;

    .data-text {
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      color: #555;
      white-space: nowrap;
      vertical-align: bottom;
    }
  }
}
</style>
